<template>
  <div>
    <!-- 面包导航 -->
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>物资管理</el-breadcrumb-item>
      <el-breadcrumb-item>库存维护</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div id="myChart"  :style="{width: '100%', height: '600px'}"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <el-form size="mini" :inline="true" :model="productVO" class="demo-form-inline">
            <el-form-item>
              <el-cascader
                  placeholder="请选择分类查询"
                  :change-on-select="true"
                  @change="selectChange"
                  v-model="categorykeys"
                  :props="searchSelectProps"
                  :options="catetorys"
                  clearable
              ></el-cascader>
            </el-form-item>

            <el-form-item>
              <el-input clearable @clear="search" v-model="productVO.name" placeholder="物资名称" ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button size="mini" type="primary" @click="search" icon="el-icon-search">查询</el-button>
            </el-form-item>
          </el-form>
          <!--表格-->
          <el-table height="620" border :data="tableData" style="width: 100%">
            <el-table-column prop="imageUrl" label="图片" align="center" width="80" padding="0px">

              <template slot-scope="scope">
                <el-popover placement="right"  trigger="hover">
                  <img :src="scope.row.imageUrl"  style="height: 200px;width: 200px"/>
                  <img  slot="reference" :src="scope.row.imageUrl" :alt="scope.row.imgUrl" style="height: 40px;width: 40px;cursor: pointer">
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="140"></el-table-column>
            <el-table-column prop="model" label="规格" width="120"></el-table-column>
            <el-table-column prop="stock" label="库存">
              <template slot-scope="scope">
                <el-tag size="mini" closable>{{scope.row.stock}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位"></el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
              style="margin-top:20px;"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[6, 8, 12]"
              layout="total, prev, pager, next, jumper,sizes"
              :total="total"
          ></el-pagination>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getProductCategoryTree} from "@/network/business/productCategory";
import {getProductStocks} from "@/network/business/Stocks";
import echarts from "echarts";


export default {
  name: "Stocks",
  data(){
    return{
      productVO: {},
      catetorys: [], //类别选择
      categorykeys:[],
      searchSelectProps: {
        expandTrigger: "hover",
        value: "id",
        label: "name",
        children: "children",
        checkStrictly: true
      }, //级联搜索选择器配置项
      tableData:[],
      pageNum:0,//当前页
      pageSize:8,//每页数量\
      total:0,
      StocksName:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
      Stocks:[5, 120, 36, 10, 10, 20]
    }
  },
  methods:{
    //查询
    search(){
      this.pageNum = 1;
      this.getProductStocks();
    },
    //分类搜索改变时
    selectChange(){
      let str = "";
      for (let i = 0; i < this.categorykeys.length; i++) {
        str += this.categorykeys[i] + ",";
      }
      str = str.substring(0, str.length - 1);
      this.productVO.categorys = str;
    },
    /*获取分类联级选择器*/
    getProductCategoryTree(){
      getProductCategoryTree().then((res) => {
        console.log(res)
        this.catetorys=res.data.list.rows
      })
    },
    /*获取表格数据*/
    getProductStocks(){
      getProductStocks(this.pageNum,this.pageSize,this.productVO.categorys,this.productVO).then((res) => {
        this.tableData=res.data.list
        this.total=res.data.total
        this.StocksName=[]
        this.Stocks=[]
        this.tableData.forEach((item) => {
          this.Stocks.push(item.stock)
          this.StocksName.push(item.name)
        })
        this.drawLine()
        console.log(res)
      })
    },
    //改变页码
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getProductStocks();
    },
    //翻页
    handleCurrentChange(current) {
      this.pageNum = current;
      this.getProductStocks();
    },
    drawLine(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '库存条形图' },
        tooltip: {},
        xAxis: {
          data:this.StocksName
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: this.Stocks,
          itemStyle: {
            normal: {
              //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
              color: function(params) {
                // build a color map as your need.
                var colorList = [
                  '#0780cf ','#fa6d1d ','#ac2026 ','#701866 ','#d22e8d ',
                  '#FE8463','#a195c5 ','#FAD860','#F3A43B','#60C0DD',
                  '#D7504B','#a195c5  ','#F4E001','#F0805A','#63b2ee'
                ];
                return colorList[params.dataIndex]
              },
              //以下为是否显示，显示位置和显示格式的设置了
              label: {
                show: true,
                position: 'top',
//                             formatter: '{c}'
                formatter: '{b}\n{c}'
              }
            }}
        }]
      });
    }
  },
  created() {
    this.getProductCategoryTree()
    this.getProductStocks()
  },
  mounted: function() {
    this.drawLine()
  }
  }
</script>

<style scoped>

</style>